<template>
  <div class="terms-container">
    <div class="terms-header">
      <button @click="goBack" class="back-button">← 返回</button>
      <h1>用户协议</h1>
    </div>
    
    <div class="terms-content">
      <section class="terms-section">
        <h2>1. 协议概述</h2>
        <p>欢迎使用绿碳圈服务。本用户协议（以下简称"协议"）是您与绿碳圈之间关于使用绿碳圈平台各项服务的法律协议。请您仔细阅读本协议的全部内容，特别是免责条款、争议解决条款等可能限制或免除绿碳圈责任的条款。</p>
      </section>
      
      <section class="terms-section">
        <h2>2. 用户注册与账号管理</h2>
        <p>2.1 您在使用绿碳圈服务时，需要注册一个绿碳圈账号。注册时，您需要提供真实、准确、完整的个人信息。</p>
        <p>2.2 您应妥善保管账号和密码，对利用该账号进行的所有活动负全部责任。如发现账号被非法使用或存在安全隐患，应立即通知绿碳圈。</p>
        <p>2.3 您承诺不得以任何方式盗用、冒用他人账号，或恶意注册绿碳圈账号。</p>
      </section>
      
      <section class="terms-section">
        <h2>3. 服务内容</h2>
        <p>3.1 绿碳圈为您提供碳足迹记录、碳减排挑战、环保知识学习、环保社区交流、碳积分兑换等服务。</p>
        <p>3.2 绿碳圈有权根据业务发展需要，随时调整、更新或终止部分或全部服务。</p>
        <p>3.3 绿碳圈不保证服务内容完全满足您的需求，也不保证服务不会中断或出错。</p>
      </section>
      
      <section class="terms-section">
        <h2>4. 用户行为规范</h2>
        <p>4.1 您在使用绿碳圈服务时，应当遵守中华人民共和国相关法律法规、本协议内容以及绿碳圈制定的各项规则。</p>
        <p>4.2 您不得利用绿碳圈服务从事以下行为：</p>
        <ul>
          <li>违反宪法确定的基本原则的；</li>
          <li>危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</li>
          <li>损害国家荣誉和利益的；</li>
          <li>煽动民族仇恨、民族歧视，破坏民族团结的；</li>
          <li>破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
          <li>散布谣言，扰乱社会秩序，破坏社会稳定的；</li>
          <li>散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；</li>
          <li>侮辱或者诽谤他人，侵害他人合法权益的；</li>
          <li>含有法律、行政法规禁止的其他内容的。</li>
        </ul>
        <p>4.3 您不得利用绿碳圈服务进行任何不正当竞争行为，或以任何方式损害绿碳圈的合法权益。</p>
      </section>
      
      <section class="terms-section">
        <h2>5. 知识产权</h2>
        <p>5.1 绿碳圈平台上所有内容，包括但不限于文字、图片、音频、视频、软件、程序、数据等信息，均由绿碳圈或其关联方依法享有知识产权。</p>
        <p>5.2 未经绿碳圈书面授权，您不得以任何方式使用、复制、修改、传播、展示、出版或发布绿碳圈平台上的任何内容。</p>
      </section>
      
      <section class="terms-section">
        <h2>6. 隐私保护</h2>
        <p>6.1 绿碳圈重视您的隐私保护，将按照《隐私政策》的规定收集、使用、存储和保护您的个人信息。</p>
        <p>6.2 请您仔细阅读《隐私政策》，了解绿碳圈的隐私保护措施和您享有的相关权利。</p>
      </section>
      
      <section class="terms-section">
        <h2>7. 免责声明</h2>
        <p>7.1 绿碳圈不对因网络故障、黑客攻击、自然灾害等不可抗力因素导致的服务中断或数据丢失承担责任。</p>
        <p>7.2 绿碳圈不对用户在社区发布的内容的真实性、准确性、合法性负责，用户应自行承担因此产生的风险和责任。</p>
        <p>7.3 绿碳圈不对用户因使用第三方服务产生的任何损失承担责任。</p>
      </section>
      
      <section class="terms-section">
        <h2>8. 协议修改</h2>
        <p>8.1 绿碳圈有权根据业务发展和法律法规变化，随时修改本协议内容。</p>
        <p>8.2 修改后的协议内容将在绿碳圈平台上公布，自公布之日起生效。如您继续使用绿碳圈服务，视为接受修改后的协议。</p>
      </section>
      
      <section class="terms-section">
        <h2>9. 协议终止</h2>
        <p>9.1 您可以随时注销绿碳圈账号，终止使用绿碳圈服务。</p>
        <p>9.2 如您违反本协议约定，绿碳圈有权暂停或终止向您提供服务，并保留追究法律责任的权利。</p>
      </section>
      
      <section class="terms-section">
        <h2>10. 争议解决</h2>
        <p>10.1 本协议的解释和执行适用中华人民共和国法律。</p>
        <p>10.2 如发生争议，双方应首先友好协商解决；协商不成的，任何一方均有权向绿碳圈所在地有管辖权的人民法院提起诉讼。</p>
      </section>
      
      <section class="terms-section">
        <h2>11. 其他条款</h2>
        <p>11.1 本协议构成双方对本协议之约定事项及其他有关事宜的完整协议，除本协议规定的之外，未赋予本协议各方其他权利。</p>
        <p>11.2 如本协议中的任何条款被认定为无效或不可执行，该条款将不影响本协议其他条款的效力。</p>
        <p>11.3 绿碳圈未行使或延迟行使本协议项下的任何权利，不构成对该权利的放弃。</p>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.terms-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.terms-header {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #45a049;
}

.terms-header h1 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.terms-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.terms-section {
  margin-bottom: 30px;
}

.terms-section h2 {
  color: #4CAF50;
  font-size: 20px;
  margin-bottom: 15px;
  border-left: 4px solid #4CAF50;
  padding-left: 10px;
}

.terms-section p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 10px;
  text-align: justify;
}

.terms-section ul {
  color: #666;
  line-height: 1.8;
  margin-bottom: 15px;
  padding-left: 20px;
}

.terms-section li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .terms-container {
    padding: 10px;
  }
  
  .terms-content {
    padding: 20px;
  }
  
  .terms-header h1 {
    font-size: 20px;
  }
  
  .terms-section h2 {
    font-size: 18px;
  }
}
</style>